<template>
  <div class="casesIncrease-box">
    <div class="subtitle-short casesIncrease-titleSize">案件数事故率同比增幅</div>
    <div id="table_casesIncrease" class="casesIncrease-tableSize"/>
  </div>
</template>

<script>
import echarts from "_echarts@4.9.0@echarts";

export default {
  name: "table_casesIncrease",
  mounted() {
    this.tableInit_casesIncrease()
  },
  methods: {
    tableInit_casesIncrease() {
      const myChart = echarts.init(document.getElementById("table_casesIncrease"));
      const option = {
        grid: {
          top: '25%',
          right: '10%',
          bottom: '15%',
          left: '11%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          top: '5%',
          data: ['案件数', '事故率'],
          textStyle: {
            color: '#fff'
          },
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '件',
            min: 0,
            max: 250,
            interval: 50,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              formatter: '{value}',
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}%',
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '案件数',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + '件';
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                label: {
                  show: false, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: [
              80, 109, 130, 192, 186, 207, 195, 222, 186, 160, 124, 93
            ]
          },
          {
            name: '事故率',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + '%';
              }
            },
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B'
              }
            },
            data: [4.0, 4.2, 7.3, 15.5, 13.3, 16.2, 14.3, 21.4, 16.0, 15.5, 11.0, 8.2]
          }
        ]
      };
      option && myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.casesIncrease-box {
  height: 32%;
  width: 100%;
}

.casesIncrease-titleSize {
  height: 15%;
  line-height: 180%;
}

.casesIncrease-tableSize {
  width: 110%;
  height: 80%
}
</style>
